<template>
  <div class="w-[560px] h-[500px] bg-Center grid grid-cols-2 items-center rounded">
    <!-- 左侧 -->
    <div class="w-full flex flex-col gap-2 justify-start bg-Transfer" style="border-right: 1px solid var(--border)">
      <!-- 搜索 -->
      <div class="w-full bg-Center p-3">
        <n-input type="text" size="tiny" placeholder="搜索" v-model:value="SearchKey">
          <template #prefix>
            <component :is="RenderIcon(SearchOutline, ' text-fontPlaceholde')" />
          </template>
        </n-input>
      </div>
      <!-- 选择列表 -->
      <div class="w-full flex flex-col gap-2 p-3 bg-Center">
        <p class="text-[14px] text-fontSecondary pb-1 px-2" style="border-bottom: 1px solid var(--border)">
          选择好友创建
        </p>
        <el-checkbox-group
          v-model="CheckedList"
          class="w-full h-[calc(500px-130px)] overflow-y-scroll"
          @change="ChangeCheckedList"
        >
          <el-checkbox v-for="item in list" :key="item.id" :value="item.id" class="w-full hover:bg-CenterHover">
            <div class="flex-1 flex flex-row items-center gap-2">
              <n-avatar round :src="item.avatar" />
              <span class="text-base"> {{ item.name }}</span>
            </div>
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="w-full flex flex-col gap-2 px-2">
      <p class="flex flex-row justify-between items-center">
        <span class="text-fontPrimary">创建群聊</span>
        <span class="text-xs text-fontPlaceholde" v-if="SelectedList.length != 0"
          >已选择<i class="mx-1">{{ SelectedList.length }}</i
          >个联系人</span
        >
      </p>
      <!-- 已经选择的好友 -->
      <div class="w-full h-[calc(500px-80px)] overflow-y-scroll">
        <div
          class="flex flex-row justify-between items-center py-2 px-3 cursor-pointer hover:bg-CenterHover"
          v-for="item in SelectedList"
        >
          <div class="flex flex-row items-center gap-2">
            <n-avatar round :src="item.avatar" />
            <span>{{ item.name }}</span>
          </div>
          <component
            :is="RenderIcon(CloseOutline, 'text-fontPlaceholde text-xl hover:text-red-500')"
            @click="RemoveCryptedItem(item)"
          />
        </div>
      </div>
      <!-- 按钮 -->
      <div class="text-end">
        <el-button size="small" @click="emit('cancel')">取消</el-button>
        <el-button type="primary" size="small" @click="emit('confirm', CheckedList)">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { NInput, NAvatar } from "naive-ui";
let CheckedList = ref<number[]>([]);
let SelectedList = ref<ICandidateFriendListItem[]>([]);
let SearchKey = ref("");
import { RenderIcon } from "@/utils/common.ts";
import { SearchOutline, CloseOutline } from "@vicons/ionicons5";
import { ICandidateFriendListItem } from "@/types/friend";
const emit = defineEmits<{
  (evt: "cancel"): void;
  (evt: "confirm", list: number[]): void;
}>();
const props = withDefaults(
  defineProps<{
    list: ICandidateFriendListItem[];
  }>(),
  {
    list: () => [],
  },
);

function ChangeCheckedList(chexked: any[]) {
  SelectedList.value = props.list.filter((item) => chexked.includes(item.id));
}

function RemoveCryptedItem(removeItem: ICandidateFriendListItem): void {
  const filteredItems = SelectedList.value.filter((item) => item.id !== removeItem.id);
  SelectedList.value = filteredItems;
  CheckedList.value = filteredItems.map((item) => item.id);
}
</script>

<style lang="scss" scoped>
:deep(.el-checkbox) {
  margin: 0;
  height: 45px;
  padding: 5px;
}
</style>
